<template>
<view>
	<MallHeader :title="title"></MallHeader>
	<view class="header-info">
		<view class="item">
			<view class="item-info">
				<view class="item1">
					<image src="/static/images/mallShop/logistic.png" class="icon-log" mode=""></image>
					运输中
				</view>
				<view class="item2">
					快件已到达成都武侯中转站
				</view>
			</view>
			<image src="/static/images/mallShop/arr_right.png" class="icon-right" mode=""></image>
		</view>
		<view class="item">
			<view class="item-info">
				<view class="item1">
					<image src="/static/images/mallShop/address.png" class="icon-addr" mode=""></image>
					张三三 18483663369
				</view>
				<view class="item2">
					成都市高新区创业路二街105号
				</view>
			</view>
			<image src="/static/images/mallShop/arr_right.png" class="icon-right" mode=""></image>
		</view>
	</view>
	<view class="line-box"></view>
	<view class="bg-f5"></view>
	<view class="goods-box">
		<view class="shop-name pad">
			<view class="left">
				<image src="/static/images/mallShop/shop.png" class="icon-shop" mode=""></image>
				成都科技直营店铺
			</view>
			<image src="/static/images/mallShop/arr_right.png" class="icon-right" mode=""></image>
		</view>
		<view class="goods-list">
			<view class="goods-item" v-for="i in 3">
				<view class="goods-img-box">
					<image src="/static/images/mallShop/goods.png" class="goods-img" mode=""></image>
				</view>
				<view class="goods-info">
					<view class="goods-title">
						商品AA的名称商品名商品名称称商品名称品名称…
					</view>
					<view class="goods-params">
						<view class="label-box">
							<text class="label">小号</text>
							<text class="label">黑色</text>
						</view>
						<view class="total">
							X 2
						</view>
					</view>
					<view class="goods-money">
						<view class="left">
							CD￥999.00
						</view>
						<!-- <view class="shop-cart">
							加入购物车
						</view> -->
					</view>
				</view>
			</view>
			<view class="goods-detail">
				<view class="item">
					<view class="label">
						商品总价
					</view>
					<view class="money">
						CD ￥ <text class="int">99</text>.00
					</view>
				</view>
				<view class="item">
					<view class="label">
						交易手续费
					</view>
					<view class="money">
						<text class="int">49</text>.99 元
					</view>
				</view>
				<view class="item">
					<view class="label">
						商品运费
					</view>
					<view class="money">
						<text class="int">5</text>.99 元
					</view>
				</view>
				<view class="goods-money">
					<text class="int">实付款：</text> 
					CD ￥ <text class="int">45</text>.00 + <text class="int">57</text>.00
				</view>
			</view>
		</view>
		<view class="bg-f5"></view>
		<view class="order-detail">
			<view class="order-title">
				订单信息
			</view>
			<view class="order-list">
				<view class="order-item">
					<view class="label">
						订单信息
					</view>
					<view class="info">
						436547568685684
					</view>
				</view>
				<view class="order-item">
					<view class="label">
						创建时间
					</view>
					<view class="info">
						2021-01-12 13:54:26
					</view>
				</view>
				<view class="order-item">
					<view class="label">
						创建时间
					</view>
					<view class="info">
						2021-01-16 13:54:26
					</view>
				</view>
				<view class="order-item">
					<view class="label">
						发货时间
					</view>
					<view class="info">
						2021-01-12 13:54:26
					</view>
				</view>
			</view>
		</view>
		<view class="order-margin"></view>
	</view>
	<!-- 查看物流 -->
	<view class="order-fixed-btn" v-if="false">
		<view class="btn order-btn bg-color">
			确定订单
		</view>
		<view class="btn">
			查看物流
		</view>
		<view class="btn">
			联系客服
		</view>	
	</view>
	<!-- end of 查看物流 -->
	<!-- 支付订单 -->
	<view class="order-fixed-btn">
		<view class="btn order-btn bg-color">
			确定订单
		</view>
		<view class="btn-info">
			<text class="int">需支付：</text> CD ￥ <text class="int">49</text>.00 + <text class="int">47</text>.00
		</view>
		
		
	</view>
	<!-- end of 支付订单 -->
</view>
</template>

<script>
	import MallHeader from '@/components/mallHeader/mallHeader'
	export default {
		components:{
			MallHeader
		},
		data(){
			return {
				title:'订单待发货'
			}
		},
		methods: {
			
		},
		created(){
			
		},
		mounted(){
			
		}
	}
</script>

<style scoped lang="scss">
	.header-info{
		.item{
			padding:0 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 130rpx;
			.item-info{
				.item1{
					display: flex;
					align-items: center;
					font-size: 34rpx;
					font-weight: bold;
					color: #333333;
					.icon-log{
						width: 38rpx;
						height: 34rpx;
						margin-right:10rpx;
					}
					.icon-addr{
						width: 30rpx;
						height: 40rpx;
						margin-right:10rpx;
					}
				}
				.item2{
					color: #999999;
					font-size: 30rpx;
					margin-top: 10rpx;
				}
				
			}
			.icon-right{
				width: 26rpx;
				height: 26rpx;
			}
		}
	}
	.line-box{
		height: 2px;
		width: 100%;
		background: url('/static/images/mallShop/line.png') repeat-x center;
	}
	.bg-f5{
		background-color: #F5F5F5;
		height: 20rpx;
	}
	.goods-box{
		.shop-name{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 30rpx;
			font-size: 32rpx;
			color: #333333;
			.left{
				@include  alignCenter();
			}
			.icon-shop{
				width: 36rpx;
				height: 34rpx;
				margin-right: 10rpx;
			}
			.icon-right{
				width: 26rpx;
				height: 26rpx;
			}
		}
		.goods-list{
			margin-top: 20rpx;
		}
		.goods-item{
			display: flex;
			border-bottom:1px solid #efefef;
			margin-top:25rpx;
			padding:0 30rpx 30rpx;
			.goods-img-box{
				margin-right: 20rpx;
				padding-top:10rpx;
				.goods-img{
					width: 164rpx;
					height: 164rpx;
					border-radius: 10rpx;
					border:1rpx solid #333333;
				}
			}
			.goods-info{
				.goods-title{
					font-size: 34rpx;
					height: 80rpx;
					line-height: 40rpx;
					color: #333333;
					overflow: hidden;
					width:510rpx;
					display: -webkit-box;
					-webkit-line-clamp:2;
					-webkit-box-orient:vertical;
					text-overflow: ellipsis;
				}
				.goods-params{
					display: flex;
					justify-content: space-between;
					margin-top: 30rpx;
					.label-box{
						display: flex;
						.label{
							@include flexCenter();
							padding:0 20rpx;
							border:1rpx solid #EFEFEF;
							border-radius: 23rpx;
							height: 46rpx;
							font-size: 26rpx;
							&+.label{
								margin-left:15rpx;
							}
						}
					}
					.total{
						font-size: 30rpx;
					}
				}
				.goods-money{
					margin-top: 40rpx;
					display: flex;
					justify-content: space-between;
					.cart-num{
						display: flex;
						align-items: center;
						border: 1px solid #CDCDCD;
						height: 50rpx;
						border-radius: 25rpx;
						.icon-add{
							font-size: 30rpx;
							width: 60rpx;
							text-align: center;
						}
						input{
							width: 40rpx;
						}
					}
					.shop-cart{
						width: 150rpx;
						height: 50rpx;
						color: #FE7B47;
						border-radius: 25rpx;
						@include flexCenter();
						border:1rpx solid #FE7B47;
						font-size: 26rpx;
					}
				}
			}
		}
		
	}
	.goods-detail{
		padding:0 30rpx;
		margin-top: 20rpx;
		.item{
			display: flex;
			justify-content: space-between;
			height: 60rpx;
			line-height: 60rpx;
			.label{
				color: #666666;
				font-size: 28rpx;
			}
			.money{
				font-size: 26rpx;
				.int{
					font-size: 28rpx;
				}
			}
		}
		.goods-money{
			font-size: 30rpx;
			color: #F13A1D;
			text-align: right;
			padding-bottom:40rpx;
			margin-top:20rpx;
		}
	}
	.order-title{
		color: #333333;
		font-size: 30rpx;
		padding-left:30rpx;
		padding-top:35rpx;
	}
	.order-list{
		padding:0 30rpx 35rpx;
		margin-top: 10rpx;
		.order-item{
			display: flex;
			justify-content: space-between;
			color: #666666;
			font-size: 28rpx;
			line-height: 60rpx;
			height: 60rpx;
			.info{
				color: #333333;
			}
		}
	}
	.order-margin{
		height: 140rpx;
	}
	.order-fixed-btn{
		position: fixed;
		box-sizing: border-box;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 120rpx;
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
		background-color: #FFFFFF;
		box-shadow: 0px -5rpx 4rpx 0px rgba(51, 51, 51, 0.05);
		padding:0 30rpx;
		.btn{
			@include btnStyle(200,80);
			@include flexCenter();
			border:1px solid #efefef;
			color:#999999;
			font-size: 34rpx;
			&+.btn{
				margin-right:20rpx;
			}
			&.bg-color{
				background: linear-gradient(-90deg, #FE4A32 0%, #FE7E48 100%);
				border:1px solid #FE4A32;
				color: #FFFFFF;
			}
		}
		.btn-info{
			color: #F13A1D;
			font-size: 26rpx;
			margin-right: 30rpx;
			.int{
				font-size: 30rpx;
			}
		}
	}

</style>
